<script setup>

import {defineProps, defineEmits, ref} from 'vue';

// 引入图书详情弹框组件
import BookDetail from "@/components/BookDetail.vue";

// 接收父组件传入的参数
defineProps({
  bookList: { // 当前页数据
    type:Array,
    required: true
  },
  currentPage: { // 当前页码
    type:Number,
    required: true
  },
  pageSize: { // 每页显示的记录数
    type:Number,
    required: true
  },
  totalItems: { // 总记录数
    type:Number,
    required: true
  }
})

// 子传父
const emit = defineEmits(['changePage'])
const handleCurrentChange = (pageNum) => {
  emit('changePage', pageNum)
}

const dialogVisible = ref(false)
const bookId = ref(null)

const showDetail = (bid) => {
  dialogVisible.value = true
  bookId.value = bid
}

const handleClose = (visible) => {
  dialogVisible.value = visible
}

</script>



<template>
  <div>
    <!-- gutter：设置每个列之间间隔 -->
    <el-row :gutter="20">
      <!-- 每行显示6个 -->
      <el-col :span="4" v-for="book in bookList" :key="book.id" style="margin-bottom: 25px;">
        <!-- 鼠标移上才显示阴影 -->
        <el-card :body-style="{ padding: '8px' }" shadow="hover">
          <!-- 按钮上显示图片，按钮可以点击 -->
          <!--                    <el-button style="padding: 5px; width: 100%;">-->
          <el-image style="width: 100%; height: 200px;"  @click="showDetail(book.id)"
                    :src="$urlImage + book.imgSrc" fit="fill"/>
          <!--                    </el-button>-->
          <!-- 显示书籍信息-->
          <div class="book-info">
            <el-popover trigger="hover">
              <template #reference>
                <div style="margin-bottom: 5px; font-weight: bold;">
                  书名：{{ book.name }}</div>
              </template>
              <div v-html="book.name"></div>
            </el-popover>

            <div style="margin-bottom: 5px; color: #666;">价格：&yen;{{ book.price }}</div>

            <el-popover trigger="hover">
              <template #reference>
                <div style="color: #666;">作者：{{ book.author }}</div>
              </template>
              <div v-html="book.author"></div>
            </el-popover>
            <div>销量：{{ book.buyCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="text-align: center">
        <!-- 分页组件 -->
        <el-pagination background layout="prev, pager, next, jumper"
                       :current-page="currentPage"
                       :page-size="pageSize"
                       :total="totalItems"
                       @current-change="handleCurrentChange"/>
      </el-col>
    </el-row>


    <!-- 显示详情的对话框，默认不可见 -->
    <book-detail :dialogVisible="dialogVisible" :bookId="bookId" @close="handleClose"/>

  </div>
</template>

<style scoped>
/* 主容器的背景和内边距 */
div {
  background-color: #f9f9f9; /* 浅灰色背景 */
  padding: 5px;
}

/* 书籍信息区域 */
.book-info {
  padding: 5px; /* 调整内边距 */
  font-size: 14px; /* 字体大小 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px; /* 最大宽度 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 每本书卡片 */
.el-card {
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

/* 鼠标悬停时添加阴影 */
.el-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 更显著的阴影效果 */
}

/* 书名、价格、作者、销量样式 */
.book-info div {
  margin: 3px 0; /* 上下间距减小 */
  color: #333; /* 深色文字 */
}

/* 分页样式 */
.el-pagination {
  margin-top: 20px; /* 顶部间距 */
}

/* 分页按钮的自定义样式 */
.el-pagination .el-button {
  background-color: #409EFF; /* 主色调 */
  color: white; /* 文字颜色 */
}

/* 分页按钮悬停效果 */
.el-pagination .el-button:hover {
  background-color: #66b1ff; /* 悬停时颜色变化 */
  color: white;
}

/* 图片样式 */
.el-image {
  border-radius: 8px; /* 圆角效果 */
  overflow: hidden; /* 防止超出 */
}

</style>
